import React from "react"
import { Checkbox } from 'antd'

const ListItem = (props) => {
  const { renderedItem, item, checked, onClick } = props;
  return (
    <li
      onClick={() => onClick(item)}
    >
      <Checkbox checked={checked}/>
      <span>{renderedItem}</span>
    </li>
  );
};

const DefaultList = props => {
  const { filteredRenderItems, checkedKeys } = props;
  const onItemSelect = item => {
    const { onItemSelect, checkedKeys } = props;
    const checked = checkedKeys.indexOf(item.key) >= 0;
    onItemSelect(item.key, !checked);
  };
  return (
    <ul>
      {filteredRenderItems.map(({ renderedItem, item }) => {
        const checked = checkedKeys.indexOf(item.key) >= 0;
        return (
          <ListItem
            key={item.key}
            item={item}
            renderedItem={renderedItem}
            checked={checked}
            onClick={onItemSelect}
          />
        );
      })}
    </ul>
  );
};

export default DefaultList
